<template>
  <div>
    <div class="form-buttons">
      <el-button-group>
        <el-button size="small" type="primary" @click="submitForm('form')">
          <i class="fa fa-check"></i> 保存
        </el-button>
        <el-button size="small" type="primary" icon="el-icon-refresh-left" @click="reset">重置</el-button>
      </el-button-group>
    </div>
    <el-form ref="form" size="small" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="名称" prop="chineseName">
        <el-input v-model="form.chineseName" placeholder="请输入公司名称" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="Name" prop="englishName">
        <el-input v-model="form.englishName" placeholder="Please enter the company address" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="chineseAddress">
        <el-input v-model="form.chineseAddress" placeholder="请输入公司地址" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="Address" prop="englishAddress">
        <el-input v-model="form.englishAddress" placeholder="Please enter the company address"
          autocomplete="off"></el-input>
      </el-form-item>
      <!-- <el-form-item label="公司简介">
        <el-input type="textarea" :rows="6" placeholder="请输入公司简介" v-model="form.companyProfile" maxlength="200"
          show-word-limit>
        </el-input>
      </el-form-item>
      <el-form-item label="Profile">
        <el-input type="textarea" :rows="6" placeholder="Please enter the company profile" v-model="form.companyProfileEn"
          maxlength="500" show-word-limit>
        </el-input>
      </el-form-item> -->
      <el-form-item label="高德地图">
        <div class="tip">
          双击地图，改变定位位置
        </div>
        <el-amap :zoom="12" :events="events" class="amap" :center="[form.lng, form.lat]" ref="myMap">
          <el-amap-marker :position="[form.lng, form.lat]" vid="0">
            <div class="marker">
              <div class="marker-round"></div>
              <div class="marker-text">
                选中地址经纬度：{{ form.lng }},{{ form.lat }}
              </div>
            </div>
          </el-amap-marker>
        </el-amap>
      </el-form-item>
      <el-form-item label="Logo">
        <div>
          <el-upload :before-upload="upload" accept="image/jpeg,image/jpg,image/png" action="#" :limit="1">
            <el-button size="small" type="primary" icon="el-icon-upload">图片上传</el-button>
            <span class="prompt">* 推荐使用尺寸 1664 x 960, 文件大小不能超过2mb，请注意更新logo后需要半个小时客户端缓存失效才会看到最新logo</span>
          </el-upload>
        </div>
        <div>
          <div class="upload-box-img">
            <img v-if="form.logoImages != null && form.logoImages != ''" :src="form.logoImages">
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as globalConfig from '@/api/admin/globalConfigApi';
import * as uploadApi from '@/api/admin/uploadApi';
import { lazyAMapApiLoaderInstance } from 'vue-amap';

export default {
  data () {
    return {
      form: {
        chineseName: '',
        englishName: '',
        chineseAddress: '',
        englishAddress: '',
        logoImages: '',
        companyProfile: '',
        companyProfileEn: '',
        lng: 0,
        lat: 0
      },
      retainForm: null,
      rules: {
        chineseName: [
          { max: 20, message: '公司中文名称长度不能超过20个字符', trigger: 'blur' }
        ],
        englishName: [
          { max: 100, message: '公司英文名称长度不能超过100个字符', trigger: 'blur' }
        ],
        chineseAddress: [
          { max: 200, message: '公司中文地址长度不能超过200个字符', trigger: 'blur' }
        ],
        englishAddress: [
          { max: 200, message: '公司英文地址长度不能超过200个字符', trigger: 'blur' }
        ]
      },
      center: [113.267678, 23.120939],
      events: {
        complete: () => {
          this.$refs.myMap.$amap.setFitView()
        },
        dblclick: (event) => {
          this.form.lng = event.lnglat.lng;
          this.form.lat = event.lnglat.lat;
        },
      },
      companyName: "",
      companyAddress: "",
      contactInfoList: [],
    }
  },
  methods: {
    submitForm (formName) {
      var self = this;
      self.$refs[formName].validate(valid => {
        if (valid) {
          globalConfig.updateGlobalConfig(self.form)
            .then(res => {
              self.$message({
                message: '保存成功',
                type: 'success'
              });
              self.retainForm = JSON.parse(JSON.stringify(self.form));
            })
            .catch(err => {
              self.$message.error('接口发生错误');
            });
        } else {
          return false
        }
      })
    },
    getGlobalConfig () {
      var self = this;
      globalConfig.getGlobalConfig()
        .then(res => {
          self.form = res;
          self.retainForm = res;
        })
        .catch(err => {
          self.$message.error('接口发生错误');
        });
    },
    reset () {
      var self = this;
      self.form = JSON.parse(JSON.stringify(self.retainForm));
    },
    upload (file) {
      var self = this;
      if (file.type.includes('image/') && file.size > 2 * 1024 * 1024) {
        self.$message.error('上传的图片不能大于2MB');
        return false;
      }
      const formData = new FormData();
      formData.append("mediaFile", file);
      uploadApi.uploadImage(formData)
        .then(res => {
          if (res.errno == 0) {
            self.form.logoImages = res.data.url;
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          self.$message.error('上传发生错误，请重新尝试');
        });
      return false;
    },
    onMapMoveEnd () {
      const map = this.$refs.myMap;
      const center = map.getCenter();
      console.log('当前地图中心点经纬度为：', center.lng, center.lat);
    },
    onMapClick () {
      console.log('点击了');
    },
    selectPoi (e) {
      console.log('selectPoi: ', e);
    },
    choosePoi (e) {
      console.log('choosePoi: ', e);
    }
  },
  mounted () {
    var self = this;
    self.getGlobalConfig();
  }
}
</script>

<style scoped>
.form-buttons {
  margin-bottom: 18px;
}

.upload-box-img {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  width: 600px;
  height: 240px;
  margin-top: 20px;
  padding: 5px;
}

.upload-box-img img {
  width: 100%;
  height: 100%;
}

.amap {
  height: 300px;
  margin-top: 15px;
}

.marker {
  display: flex;
  position: relative;
}

.marker .marker-round {
  width: 20px;
  height: 20px;
  top: 15px;
  position: absolute;
  background: #409EFF;
  border-radius: 50%;
  border: 1px solid #EBEEF5;
}

.marker .marker-text {
  margin-left: 30px;
  background: #fff;
  /* top: 10px; */
  position: absolute;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #EBEEF5;
  border-radius: 10px;
  width: 300px;
  text-align: center;
}

.tip {
  padding: 0 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  color: #5e6d82;
}
</style>